<template>
  <s-layout
    title="创建家庭"
    navbar="inner"
    color="#000000"
    :is_back="true"
    :leftIcon="''"
    :bgStyle="pageStyle.background"
    background-color="#F8F8F8"
  >
    <view class="hW_30"></view>
    <view class="inputName flex align-center justify-center">
      <input v-model="familyName" placeholder="请输入家庭名称" placeholder-class="inputName_placeholder"
             :focus="familyNameFocus" @input="nameInput"></input>
    </view>
    <view class="hW_89"></view>
    <button class="confirm flex flex align-center justify-center" @click.stop="debounce(confirmName,1500,true)">
      完成
    </button>
  </s-layout>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import throttle from '@/sheep/helper/throttle';
  import debounce from '@/sheep/helper/debounce';

  const pageStyle = reactive({
    background: { color: '#FFFFFF', src: '' },
  });
  const familyName = ref('');
  const familyNameFocus = ref(false);

  onMounted(() => {
    familyNameFocus.value = true;
  });

  function nameInput(e) {
    if (e.detail.value.length > 12) {
      familyName.familyName = e.detail.value.substring(0, 12);
    }
  }

  async function confirmName() {
    if (!familyName.value) {
      uni.showToast({
        title: '请输入家庭名称',
        icon: 'none',
      });
      return;
    }
    const { code } = await sheep.$api.family.createFamily({
      name: familyName.value,
    });
    if (code == 1) {
      uni.showToast({
        title: '创建成功',
        icon: 'none',
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
</script>


<style scoped lang="scss">
  .inputName {
    width: 702rpx;
    height: 80rpx;
    background: #F8F8F8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    padding: 0 20rpx;

    input {
      width: 662rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }

  .tips {
    width: 660rpx;
    height: 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
  }

  .confirm {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;
    border: none;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFFFFF;
  }
</style>
